<template>
  <div class="detailStyle">
    <div class="pro_content">
    <div class="header">
        <div>
          <img src="../../assets/2.jpg">
        </div>
      <div>

        <div>
          {{project.name}}
        </div>
        <div style="display: block;width: 100%;">
          技术要求：<span v-for="(item,i) in project.developer" :key="i">
          {{item}}
        </span>
        </div>
        <div>类型：{{project.type}}</div>
        <div>总天数：{{project.cycle}}</div>
        <div>金额类型：{{project.moneyType==1?'投标':'定价'}}</div>

        <div v-if="project.moneyType!=1">金额：{{project.money}}</div>
        <div>时间：{{project.startTime}}</div>
        <div>投票人数：{{project.applicantspeo}}</div>
        <div>状态：{{project.state==1?'发布中':'已审核'}}</div>
        <div style="position: absolute;right: 15%; top:0;width: auto" @click="imgshow=!imgshow">
          <img src="@/assets/shoucang.png" v-if="!imgshow"/>
          <img v-else src="@/assets/shoucang2.png"/>
        </div>
        <div>
          <el-col :span="8">
            <el-button @click="readeyfun" type="primary">投标</el-button>
          </el-col>
        </div>
      </div>
      </div>

    <div class="content">
      <div>项目内容：</div>
    {{project.content}}
    </div>
    <div class="footer">

    </div>
  </div>
    <el-dialog
      title="投标"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

        <el-form ref="form" :model="form" label-width="auto" :rules="rule">
          <el-form-item label="联系电话" prop="projectMoney">
            <el-input v-model="form.projectMoney"></el-input>
          </el-form-item>
          <el-form-item label="电子邮件" prop="projectMoney">
            <el-input v-model="form.projectMoney"></el-input>
          </el-form-item>
          <el-form-item label="投标金额" prop="projectMoney">
            <el-input v-model="form.projectMoney"></el-input>
          </el-form-item>
        </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>
<script>
  export default {
    data(){
      return{
        dialogVisible:false,
        imgshow:false,
        form:{
            projectMoney:''
        },
        rule:{
          projectMoney:{ required: true, message: '请填写投标工资', trigger: 'blur' }
        },
       project:{name:'百度网盘 好友发送指定 关键字 匹配正确后，分享指定文件给他',developer:['java','c++'],moneyType:'',type:'web网页',cycle:'45天',moneyType:'1',money:1000,startTime:'2个小时前',applicantspeo:10,state:1,content:'可行性研究报告是在制定某一建设或科研项目之前，对该项目实施的可能性、有效性、技术方案及技术政策进行具体、深入、细致的技术论证和经济评价，以求确定一个在技术上合理、经济上合算的最优方案和最佳时机而写的书面报告。\n' +
           '\n' +
           '可行性研究报告主要内容是要求以全面、系统的分析为主要方法。整个可行性研究提出综合分析评价，指出优缺点和建议，根据结论的需要，以增强可行性研究报告的说服力。\n' +
           '\n' +
           '可行性研究报告是项目建设论证、审查、决策的重要依据，也是以后筹集资金或者申请资金的一个重要依据。可行性研究编写时要注意数据方面的真实性和合理性，只有报告通过审核后，才能得到资金支持，同时也能为项目以后的发展提供重要的依据。\n' +
           '\n' +
           '可行性研究是确定建设项目前具有决定性意义的工作，是在投资决策之前，对拟建项目进行全面技术经济分析论证的科学方法，'}
      }
    },
    methods:{
      readeyfun(){
        console.log(555)
        if(this.project.moneyType==1){
          this.dialogVisible = true
        }else {
          this.$confirm('是否确认报名', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(()=>{
            console.log(111)
            this.$message({
              type: 'success',
              message: '报名成功'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          })
        }
      },
      handleClose(){}
    }
  }
</script>
<style lang="less" scoped>
  .detailStyle{
    width: 100%;
    background-color: rgb(240, 242, 245);
    .pro_content{
      width: 95%;
      margin: 0 auto;
      .header{
        width: 100%;
        background-color: white;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px;
        height: 400px;
        display: flex;
        /*flex-wrap: wrap;*/
        align-items: center;

        >div:first-child{
          width: 50%;
          height: 80%;
          img{
            width: 100%;
            height: 100%;
          }
        }
       >div:nth-of-type(2){
          flex: 1;
          margin-left: 2%;
          height: 80%;
         position: relative;
          /*background-color: skyblue;*/
         div{
           width: 40%;
           display: inline-block;
           font-size: 16px;
           height: 30px;
           text-align: left;
            margin-top: 5px;
           /*display: flex;*/
           /*background-color: forestgreen;*/
         }
         >div:nth-of-type(1){
           width: 100%;
           height: auto;
           font-size: 18px;
           margin-bottom: 10px;
           font-weight: 900;
           font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
           text-align: left;
         }
         >div:last-of-type{
           position: absolute;
           width: 100%;
           height: 40px;
           right: 50%;
           transform: translate(50%);
           bottom: 0;
           .el-button{
             width: 100%;
           }
         }
        }
      }
    }
  }
.content{
  background-color: white;
  margin-top: 10px;
  height: 400px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

</style>
